/* --------------------------------------------------------------------------- planets starting position and lighting effect */

/* --------------------------------------------------------------------------- mercury ; pos: Top */

#mercury .pos           { left: 50%; top: -1%; }

#mercury .planet        { animation-name: shadow-mercury; }

@keyframes 
shadow-mercury  { 0%    { box-shadow: inset 0       0     1px  rgba(0, 0, 0, 0.5); /* TOP */ }
                  25%   { box-shadow: inset 4px     0     2px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                  50%   { box-shadow: inset 13px    -5px  4px  rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  50.01%{ box-shadow: inset -13px   -5px  4px  rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  75%   { box-shadow: inset -4px    0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ }
                  100%  { box-shadow: inset 0       0     1px  rgba(0, 0, 0, 0.5); /* TOP */ }
                }

.scaled.view-2D #mercury .planet,
.scaled.view-3D #mercury .planet { box-shadow: inset -4px    0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ }

/* --------------------------------------------------------------------------- venus ; pos: Left */

#venus .pos             { left: 0; top: 50%; }

#venus .planet          { animation-name: shadow-venus; }

@keyframes 
shadow-venus    { 0%    { box-shadow: inset 4px    0     2px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                  25%   { box-shadow: inset 22px   -20px 10px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  25.5% { box-shadow: inset -22px  -20px 10px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  50%   { box-shadow: inset -4px   0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ }
                  75%   { box-shadow: inset 0      0     1px  rgba(0, 0, 0, 0.5); /* TOP */ }
                  100%  { box-shadow: inset 4px    0     2px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                } 

.scaled.view-2D #venus .planet,
.scaled.view-3D #venus .planet { box-shadow: inset -4px   0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ }          

/* --------------------------------------------------------------------------- earth ; pos: Right */

#earth .pos             { left: 100%; top: 50%; }

#earth .planet          { animation-name: shadow-earth; }

@keyframes 
shadow-earth    { 0%    { box-shadow: inset -4px   0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ }
                  25%   { box-shadow: inset 0      0     1px  rgba(0, 0, 0, 0.5); /* TOP */ }
                  50%   { box-shadow: inset 4px    0     2px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                  75%   { box-shadow: inset 24px   -20px 15px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  75.01%{ box-shadow: inset -24px  -20px 15px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  100%  { box-shadow: inset -4px   0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ } 
                }

.scaled.view-2D #earth .planet,
.scaled.view-3D #earth .planet { box-shadow: inset -4px   0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ }

/* --------------------------------------------------------------------------- moon */

#earth .orbit .pos      { left: 100%; top: 50%; }

/* --------------------------------------------------------------------------- mars ; pos: Bottom */

#mars .pos              { left: 50%; top: 100%; }

#mars .planet           { animation-name: shadow-mars; }

@keyframes 
shadow-mars     { 0%    { box-shadow: inset -18px   -10px  10px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  25%   { box-shadow: inset -4px   0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ }
                  50%   { box-shadow: inset 0      1px  1px  rgba(0, 0, 0, 0.5); /* TOP */ }
                  75%   { box-shadow: inset 4px    0     2px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                  99.99%{ box-shadow: inset 18px  -10px  10px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  100%  { box-shadow: inset -18px   -10px  10px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                }

.scaled.view-2D #mars .planet,
.scaled.view-3D #mars .planet { box-shadow: inset -4px   0     2px  rgba(0, 0, 0, 0.5); /* RIGHT */ }

/* --------------------------------------------------------------------------- jupiter ; pos: Right */

#jupiter .pos           { left: 100%; top: 50%; }

#jupiter .planet        { animation-name: shadow-jupiter; }

@keyframes 
shadow-jupiter  { 0%     { box-shadow: inset -16px  0     5px   rgba(0, 0, 0, 0.5); /* RIGHT */ }
                  25%    { box-shadow: inset 0      3px   2px   rgba(0, 0, 0, 0.5); /* TOP */ }
                  50%    { box-shadow: inset 16px   0     5px   rgba(0, 0, 0, 0.5); /* LEFT */ }
                  75%    { box-shadow: inset 94px  -30px  40px  rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  75.01% { box-shadow: inset -94px -30px  40px  rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  100%   { box-shadow: inset -16px  0     5px   rgba(0, 0, 0, 0.5); /* RIGHT */ }
                }

.scaled.view-2D #jupiter .planet,
.scaled.view-3D #jupiter .planet { box-shadow: inset -16px  0     5px   rgba(0, 0, 0, 0.5); /* RIGHT */ }

/* --------------------------------------------------------------------------- saturn ; pos: Left */

#saturn .pos            { left: 0%; top: 50%; }

#saturn .planet         { animation-name:     shadow-saturn; }

@keyframes 
shadow-saturn   { 0%    { box-shadow: inset 16px    0     5px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                  25%   { box-shadow: inset 80px  -30px  50px  rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  25.01%{ box-shadow: inset -94px -30px  40px  rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  50%   { box-shadow: inset -16px   0     5px  rgba(0, 0, 0, 0.5); /* RIGHT */ }
                  75%   { box-shadow: inset -2px    3px   2px  rgba(0, 0, 0, 0.5); /* TOP */ }
                  100%  { box-shadow: inset 16px    0     5px  rgba(0, 0, 0, 0.5); /* LEFT */ } 
                }

.scaled.view-2D #saturn .planet,
.scaled.view-3D #saturn .planet { box-shadow: inset -16px   0     5px  rgba(0, 0, 0, 0.5); /* RIGHT */ }

/* --------------------------------------------------------------------------- saturn ring */

/*

#saturn .ring           { animation-name:     shadow-saturn-ring; }

@keyframes 
shadow-saturn-ring{ 0%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45); opacity: .4; }
                  25%    { box-shadow: inset -5px   -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                  25.01% { box-shadow: inset 5px    -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                  50%    { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                  75%    { box-shadow: inset 0      30px  50px  rgba(20, 40, 50, 0);  opacity: .3; }
                  100%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                }

.scaled.view-2D #saturn .ring,
.scaled.view-3D #saturn .ring { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.6); }

*/

/* --------------------------------------------------------------------------- uranus ; pos: Left */

#uranus .pos            { left: 0; top: 50%; }

#uranus .planet         { animation-name: shadow-uranus; }

@keyframes 
shadow-uranus   { 0%    { box-shadow: inset 8px     0     5px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                  25%   { box-shadow: inset 40px   -15px 40px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  25.01%{ box-shadow: inset -40px  -15px 40px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  50%   { box-shadow: inset -8px    0     5px  rgba(0, 0, 0, 0.5); /* RIGHT */ }
                  75%   { box-shadow: inset 0       0     2px  rgba(0, 0, 0, 0.5); /* TOP */ }
                  100%  { box-shadow: inset 8px     0     5px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                }

.scaled.view-2D #uranus .planet,
.scaled.view-3D #uranus .planet { box-shadow: inset -8px    0     5px  rgba(0, 0, 0, 0.5); /* RIGHT */ }

/* --------------------------------------------------------------------------- neptune ; pos: Top */

#neptune .pos           { left: 50%; top: 0; }

#neptune .planet        { animation-name: shadow-neptune; }

@keyframes 
shadow-neptune  { 0%    { box-shadow: inset 0       0     2px  rgba(0, 0, 0, 0.5); /* TOP */ }
                  25%   { box-shadow: inset 12px    0     5px  rgba(0, 0, 0, 0.5); /* LEFT */ }
                  50%   { box-shadow: inset 50px   -15px  40px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  50.01%{ box-shadow: inset -50px  -15px  40px rgba(0, 0, 0, 0.5); /* BOTTOM */ }
                  75%   { box-shadow: inset -12px   0     5px  rgba(0, 0, 0, 0.5); /* RIGHT */ }
                  100%  { box-shadow: inset 0       0     2px  rgba(0, 0, 0, 0.5); /* TOP */ }
                }

.scaled.view-2D #neptune .planet,
.scaled.view-3D #neptune .planet { box-shadow: inset -12px   0     5px  rgba(0, 0, 0, 0.5); /* RIGHT */ }


/* --------------------------------------------------------------------------- DEBUG 
.pos, 
.planet, 
.orbit,
.ring { animation-duration: 20s!important; }

/* */
